<template>
  <table ref="cmimgbox" class="cmimgbox" style="height: 100%;width: 100%">
    <tr><td style="vertical-align: middle;overflow: hidden;">
      <div style="width: 1px;height: 1px;margin-left: 50%;background-color: red;position: absolute;">
        <img ref="myimg" class="cmimgbox_img" style="">
      </div>
      <div
        style="position: absolute;bottom: 8px;right: 8px; width: 90px;
      height: 30px;font-size: 14px;color: #6E747D;text-align: center;font-family: Arial;"
      >
        {{ parseInt(scale*100) }}%
      </div>
<!--      <cmPrint ref="print" style="display: none">-->
<!--        <img ref="myprintimg" style="width: 100%">-->
<!--      </cmPrint>-->
    </td></tr>
  </table>

</template>

<script>
export default {
  name: 'Imgbox',
  props: {
    src: {}
  },
  data() {
    return {
      height: 0,
      width: 0,
      scale: 1,
      core: {
        x: 0,
        y: 0
      },
      deg: 0
    }
  },
  watch: {
    'src'() {
      this.reset()
    }
  },
  mounted() {
    if (this.src !== undefined) {
      this.reset()
    }
    var t = this
    this.$refs.cmimgbox.addEventListener('mousewheel', function(e) {
      // console.log(e.wheelDeltaY)
      if (e.wheelDeltaY > 0) {
        t.up()
      } else {
        t.down()
      }
    })
    var dian = {
      x: 0,
      y: 0,
      on: false,
      timeon: false
    }
    this.$refs.cmimgbox.addEventListener('mousedown', function(e) {
      dian.x = e.clientX
      dian.y = e.clientY
      dian.on = true
      t.$refs.myimg.className = 'cmimgbox_img2'
      // console.log(t.$refs.myimg.style, 't.$refs.myimg.style')
      // t.$refs.myimg.style.transition = '';
      e.preventDefault()
    })

    this.$refs.cmimgbox.addEventListener('mousemove', function(e) {
      if (dian.on) {
        t.core.x += (e.clientX - dian.x) / t.scale
        t.core.y += (e.clientY - dian.y) / t.scale
        dian.x = e.clientX
        dian.y = e.clientY
        t.ofpostion()
      }
      return false
    })

    this.$refs.cmimgbox.addEventListener('mouseup', function(e) {
      dian.on = false
      t.$refs.myimg.className = 'cmimgbox_img'
    })
    // if (this.src !== undefined) {
    //   this.getimg();
    // }
  },
  methods: {
    print() {
      var t = this
      t.$refs.myprintimg.src = t.$refs.myimg.src
      setTimeout(function() {
        t.$refs.print.openPrint()
      }, 100)
    },
    rotate(fx) {
      fx > 0 ? this.deg += 90 : this.deg -= 90
      this.$refs.myimg.style.transform = 'rotate(' + this.deg + 'deg)'
    },
    getxy() {
      return {
        width: this.width * this.scale,
        height: this.height * this.scale,
        x: this.core.x * this.scale,
        y: this.core.y * this.scale
      }
    },
    ofpostion() {
      var pos = this.getxy()
      this.$refs.myimg.style.width = pos.width + 'px'
      this.$refs.myimg.style.height = pos.height + 'px'
      this.$refs.myimg.style.top = (-pos.height / 2 + pos.y) + 'px'
      this.$refs.myimg.style.left = (-pos.width / 2 + pos.x) + 'px'
    },
    reset() {
      var t = this
      t.core = {
        x: 0,
        y: 0
      }
      t.deg = 0
      this.$refs.myimg.style.transform = 'rotate(' + this.deg + 'deg)'
      var img = new Image()
      img.src = this.src // 'https://i0.hdslb.com/bfs/article/bf4340ce45c09782291254e067d2a4ec1a58c204.jpg@860w_482h.webp';
      img.onload = function() {
        var boxwidth = t.$refs.cmimgbox.offsetWidth
        var boxheight = t.$refs.cmimgbox.offsetHeight
        t.width = img.width
        t.height = img.height

        if (t.height > boxheight) {
          t.scale = boxheight / t.height
        }

        if (t.width * t.scale > boxwidth) {
          t.scale = boxwidth / t.width
        }

        t.$refs.myimg.src = img.src
        t.ofpostion()
        // console.log(t.height, t.width, boxwidth, boxheight)
      }
      //
    },
    up() {
      this.scale += 0.2
      this.ofpostion()
    },
    down() {
      if (this.scale > 0.2) {
        this.scale -= 0.2
        this.ofpostion()
      }
    }
  }
}
</script>

<style scoped>
.cmimgbox{
  position: relative;
  top:0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow: hidden;
  cursor: move;
  background-color: rgba(232, 232, 232, 0.44);
}
.cmimgbox_img2{
  position: absolute;
}
.cmimgbox_img{
  position: absolute;
  transition: all .2s ease-out;
}
</style>
